<template>
	<navBar :title="title"/>
	<view class="content">
		<swiper class="swiper" circular indicator-dots autoplay interval="2000" duration="500">
			<swiper-item v-for="(value,index) in banners" :key="index">
				<image :src="value.pic" />
			</swiper-item>
		</swiper>
		<view class="title">
			<text>热门歌手</text>
		</view>
		<view class="hotList">
			<view class="hotItem" v-for="value in hotList" :key="value.id" @click="()=>toSingerDetails(value.id)">
				<image mode="widthFix" :src="value.picUrl" />
				<text>{{value.name}}</text>
			</view>
		</view>
		<view class="title">
			<text>搜索音乐</text>
		</view>
		<view>
			<view class="searchButton" @click="toSearch">
				搜索
			</view>
		</view>
		<view class="title">
			<text>最新音乐</text>
		</view>
		<view>
			<musicItem v-for="(value,index) in newSongList" :key="index" :info="value"></musicItem>
		</view>
		<view class="title">
			<text>歌曲榜</text>
		</view>
		<view style="display: flex;padding: 3vw;" v-for="value in chartList" :key="value.id"
			@click="()=>chartView(value.id)">
			<image :src="value.coverImgUrl" style="width: 30vw;height: 30vw;border-radius: 1vw;" />
			<text
				style="position: absolute;margin-top: 25vw;margin-left: 1vw;font-size: 0.8em;color: #eeeeee;">{{value.updateFrequency}}</text>
			<view class="chartSong">
				<text v-for="(track,index) in value.tracks" :key="index">
					{{index+1}}.{{track.first}} - {{track.second}}
				</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		reactive
	} from "vue";
	import baseUrl from '@/config.js'

	const title = '主页'

	let banners = reactive([])
	let hotList = reactive([])
	let newSongList = reactive([])
	let chartList = reactive([])

	function goBack() {

	}

	function toSingerDetails(id) {
		uni.navigateTo({
			url: `/pages/singerDetails/singerDetails?id=${id}`,
			animationType: "slide-in-right",
			animationDuration: 500,
		})
	}

	function toSearch() {
		uni.navigateTo({
			url: '/pages/search/search'
		})
	}

	function chartView(id) {
		uni.navigateTo({
			url: `/pages/songListPage/songListPage?id=${id}`
		})
	}

	onMounted(() => {
		uni.request({
			url: baseUrl + "/banner?type=1",
			success(res) {
				res.data.banners.forEach((item) => {
					banners.push(item)
				})
			}
		})
		uni.request({
			url: baseUrl + "/top/artists?offset=0&limit=10",
			success(res) {
				res.data.artists.forEach((item) => {
					hotList.push(item)
				})
			}
		})
		uni.request({
			url: baseUrl + "/personalized/newsong",
			success(res) {
				res.data.result.forEach((item) => {
					newSongList.push(item)
				})
			}
		})
		uni.request({
			url: baseUrl + "/toplist/detail",
			success(res) {
				// console.log(res)
				chartList.push(res.data.list[0])
				chartList.push(res.data.list[1])
				chartList.push(res.data.list[2])
				chartList.push(res.data.list[3])
			}
		})
	})
</script>

<style lang="less">
	.content {
		padding: 3vw;
		box-sizing: border-box;
	}

	.swiper {

		swiper-item {
			width: 100%;
		}

		swiper-item image {
			display: block;
			width: 100%;
			height: 100%;
			border-radius: 8px;
		}
	}

	.title {
		height: 7vh;
		display: flex;
		align-items: center;
		font-size: 1.5em;
		font-weight: bolder;

		text {
			padding-left: 3vw;
			border-left: solid #007aff 1vw;
		}
	}

	.hotList {
		display: flex;
		overflow: auto;
	}

	.hotItem {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 3vw;
	}

	.hotItem image {
		width: 30vw;
		border-radius: 8px;
	}

	.hotItem text {
		font-size: 1em;
		font-weight: bold;
	}

	::-webkit-scrollbar {
		display: none;
	}

	.searchButton {
		width: 100%;
		height: 3vh;
		background-color: #ededed;
		border-radius: 100vh;
		display: flex;
		justify-content: center;
		font-weight: 700;
		color: #5c5c5c;
	}

	.chartSong {
		display: flex;
		height: 30vw;
		flex-direction: column;
		padding-left: 3vw;
		justify-content: center;

		text {
			line-height: 5vh;
			color: #666666;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
			width: 50vw;
		}
	}
</style>
